<template>
  <div>
    <!-- 图片背景组件 -->
    <section class="bgimg-control" :class="!showHeader ? 'reduce-padding' : ''">
      <div
        class="control-head"
        v-if="showHeader"
        @click.stop="showBgControl = !showBgControl"
      >
        <p class="section-name">填充背景</p>

        <div class="header-action">
          <i
            v-if="useBackground"
            class="iconfont icon-xianshi"
            @click.stop="$set(backgroudData, 'useBackground', false)"
          ></i>
          <i
            v-else
            class="iconfont icon-yincang"
            @click.stop="$set(backgroudData, 'useBackground', true)"
          ></i>

          <i
            v-if="!showBgControl"
            @click.stop="showBgControl = !showBgControl"
            class="iconfont icon-jiahao"
          ></i>
          <i
            v-else
            @click.stop="showBgControl = !showBgControl"
            class="iconfont icon-jian"
          ></i>
        </div>

        <!-- <p class="reset" @click="resetBg">重置</p> -->
      </div>

      <div v-show="showBgControl || !showHeader">
        <div class="tabs-section">
          <div class="tab-bg" :class="'active-bg' + activeTab"></div>
          <div class="tab-content">
            <div
              class="tab-item"
              :class="activeTab == index ? 'activeTab' : ''"
              v-for="(tab, index) in tabs"
              :key="index"
              @click="tabChange(tab, index)"
            >
              {{ tab.text }}
            </div>
          </div>
        </div>
        <!-- 背景色配置 -->
        <div class="bgcolor-control" v-show="activeTab == 0">
          <div class="color-control">
            <a-input
              type="color"
              v-model="backgroudData.backgroundColor"
              @change="changeColor"
            />
          </div>
          <div class="color-text">
            <a-input
              type="text"
              v-model="backgroudData.backgroundColor"
              @change="changeColor"
            />
          </div>
        </div>
        <!-- 背景图设置 -->
        <div class="Img-control" v-show="activeTab == 1">
          <div
            class="img-select"
            @click="$refs.editBackground.onClickUploadBtn()"
          >
            <div class="img-add">
              <i class="iconfont icon-jiahao"></i>
            </div>
            <div class="img-desc">
              <h4>添加图片</h4>
              <p>最佳尺寸：{{ sizeText || '750*316' }}px</p>
            </div>
          </div>
          <div class="upload-list" v-if="backgroudData.bgImg">
            <div class="upload-item" v-if="backgroudData.bgImg">
              <img :src="backgroudData.bgImg" alt="" />
              <div class="hover-cover">
                <i class="iconfont icon-xianshi" @click.stop="previewImg"></i>
                <i
                  class="iconfont icon-weibiaoti-1"
                  @click.stop="$refs.editBackground.onClickUploadBtn()"
                ></i>
                <div class="close-icon" @click.stop="deleteImg">x</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 不透明度 -->
        <div class="bgimg-opacity" v-if="bgTab.type == 'img'">
          <div class="control-body">
            <i class="iconfont icon-touming"></i>
            <a-slider
              class="slider"
              v-model="backgroudData.bgOpacity"
              :min="0"
              :max="100"
              @change="sliderOpacity"
            />
            <div
              @mouseenter="showBgOpacity = !showBgOpacity"
              @mouseleave="showBgOpacity = !showBgOpacity"
            >
              <a-input-number
                v-show="showBgOpacity"
                class="slider-input"
                :min="0"
                :max="100"
                v-model="backgroudData.bgOpacity"
                @change="sliderOpacity"
              />
              <span class="borderNumSpan" v-show="!showBgOpacity">{{
                backgroudData.bgOpacity || 0
              }}</span>
              <span>%</span>
            </div>
          </div>
        </div>
        <!-- 填充样式 -->
        <div class="repeat-section" v-if="bgTab.type == 'img'">
          <div class="icon-box">
            <i
              class="iconfont icon-beijinglashen"
              :class="
                backgroudData.backgroundSize == '100% 100%' ? 'active' : ''
              "
              @click="setBgSize"
            ></i>
          </div>
          <div class="icon-box">
            <i
              class="iconfont icon-beijingyibiyi"
              :class="
                backgroudData.backgroundSize == '100%' &&
                backgroudData.backgroundRepeat == 'no-repeat'
                  ? 'active'
                  : ''
              "
              @click="setBgRealSize"
            ></i>
          </div>
          <div class="icon-box">
            <i
              class="iconfont icon-beijingzhongfu"
              :class="
                backgroudData.backgroundRepeat == 'repeat' ? 'active' : ''
              "
              @click="setBgRepeat"
            ></i>
          </div>
        </div>
      </div>
    </section>

    <storage-select
      :hiddenInput="true"
      ref="editBackground"
      @onOk="
        (e) => {
          $set(backgroudData, 'backgroundImage', `url(${e})`);
          $set(backgroudData, 'bgImg', e);
          $set(backgroudData, 'backgroundColor', '');
          $set(backgroudData, 'backgroundSize', '100% 100%');
        }
      "
    ></storage-select>
    <!-- 图片预览组件 -->
    <previewImg
      :previewSrc="previewSrc"
      :hidden.sync="showPreviewImg"
      @close="showPreviewImg = false"
    ></previewImg>
  </div>
</template>

<script>
// 上传图片
import SelectLink from "@/components/DiyNew/SelectLink/index.vue";
import previewImg from "@/components/DiyNew/previewImg/index.vue";

export default {
  name: "fontControl",
  components: {
    SelectLink,
    previewImg,
  },
  props: {
    backgroudData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showHiddenIcons: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    sizeText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tabs: [
        {
          text: "颜色",
          type: "color",
        },
        {
          text: "图片",
          type: "img",
        },
      ],
      activeTab: 0,
      showPreviewImg: false,
      previewSrc: "",
      showBgControl: false,
      bgTab: {},
      showBgOpacity: false,
    };
  },
  watch: {},
  computed: {
    useBackground() {
      return this.backgroudData.useBackground;
    },
  },
  methods: {
    changeColor() {
      this.$set(this.backgroudData, "backgroundImage", "");
      this.$set(this.backgroudData, "bgImg", "");
    },
    // 删除当前图片
    deleteImg() {
      this.$set(this.backgroudData, "backgroundImage", "");
      this.$set(this.backgroudData, "bgImg", "");
    },
    // 预览图片
    previewImg() {
      this.showPreviewImg = true;
      this.previewSrc = this.backgroudData.bgImg;
    },
    // 点击上传列表的图片
    handleImgItem() {
      console.log(this.backgroudData.bgImg);
    },
    // 点击重置
    resetBg() {
      this.$emit("resetBg");
    },
    tabChange(tab, index) {
      this.activeTab = index;
      this.bgTab = tab;
      this.$emit("bgTabChange", { tab });
    },
    sliderOpacity(e) {
      this.$set(this.backgroudData, "bgOpacity", e);
      this.$set(this.backgroudData, "opacity", e + "%");
    },
    setBgRealSize() {
      this.$set(this.backgroudData, "backgroundSize", "100%");
      this.$set(this.backgroudData, "backgroundRepeat", "no-repeat");
    },
    setBgRepeat() {
      let bgRepeat = this.backgroudData.backgroundRepeat;
      if (bgRepeat == "repeat") return;
      this.$set(this.backgroudData, "backgroundRepeat", "repeat");
    },
    setBgSize() {
      let bgSize = this.backgroudData.backgroundSize;
      if (bgSize == "100% 100%") return;
      this.$set(this.backgroudData, "backgroundSize", "100% 100%");
      this.$set(this.backgroudData, "backgroundRepeat", "no-repeat");
    },
  },
};
</script>

<style lang="scss" scoped>
.bgimg-control {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #f0f2f5;
  .control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    text-align: left;
    .header-action {
      .iconfont {
        font-size: 16px;
        cursor: pointer;
      }
      .iconfont:first-child {
        margin-right: 5px;
      }
    }
    p {
      margin: 0;
      cursor: pointer;
      user-select: none;
    }
    .reset {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      opacity: 0.45;
      cursor: pointer;
    }
    .controls {
      display: flex;
      align-items: center;
      i {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
      }
      i:hover {
        background-color: #f6f7f9;
      }
    }
  }
  .tabs-section {
    width: 228px;
    height: 34px;
    background: #f6f7f9;
    border-radius: 6px;
    margin: 14px auto 10px;
    position: relative;
    .tab-bg {
      width: 113px;
      height: 30px;
      background: #ffffff;
      border-radius: 4px;
      position: absolute;
      left: 1px;
      top: 2px;
      z-index: 11;
      transition: all 0.2s;
    }
    .active-bg0 {
      left: 1px;
    }
    .active-bg1 {
      left: 113px;
    }
    .tab-content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 12;
      display: flex;
      justify-content: center;
      align-items: center;
      .tab-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        opacity: 0.45;
        transition: all 0.2s;
        cursor: pointer;
        user-select: none;
      }
      .activeTab {
        opacity: 1;
        font-weight: 600;
      }
    }
  }
  .bgcolor-control {
    display: flex;
    align-items: center;
    margin-top: 10px;
    input {
      width: 168px;
      border: 0 none;
      height: 100%;
      background: #f6f7f9;
      padding-top: 0;
      padding-bottom: 0;
    }
    .color-control {
      width: 48px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
      margin-right: 8px;
      input {
        padding: 6px 10px;
        width: 44px;
      }
    }
    .color-text {
      width: 172px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
    }
  }
  .Img-control {
    width: 228px;
    background: #f6f7f9;
    border-radius: 6px;
    overflow: hidden;
    .img-select {
      width: 228px;
      height: 72px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      cursor: pointer;
      .img-add {
        width: 44px;
        height: 44px;
        background: #ffffff;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          font-size: 25px;
        }
      }
      .img-desc {
        margin-left: 14px;
        text-align: left;
        h4 {
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: #000000;
          margin: 0;
        }
        p {
          margin: 0;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #878889;
        }
      }
    }
    .upload-list {
      width: 224px;
      background: #ffffff;
      border-radius: 6px;
      margin: 2px;
      display: flex;
      flex-wrap: wrap;
      padding: 4px;
      .upload-item {
        width: 44px;
        height: 44px;
        background: #ffffff;
        border: 1px solid rgba(112, 112, 112, 0.050980392156862744);
        border-radius: 4px;
        margin: 4px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .hover-cover {
          width: 44px;
          height: 44px;
          background: rgba(0, 0, 0, 0.5);
          border: 2px solid #1890fc;
          border-radius: 4px;
          position: absolute;
          left: -1px;
          top: -1px;
          z-index: 11;
          display: flex;
          justify-content: center;
          align-items: center;
          display: none;
          transition: all 0.2s;
          .iconfont {
            color: #ffffff;
            font-size: 15px;
            cursor: pointer;
          }
          .icon-xianshi {
            margin-right: 5px;
          }
          .close-icon {
            width: 14px;
            height: 14px;
            background: #ff5414;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: -7px;
            top: -7px;
            z-index: 12;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
      .upload-item:hover > .hover-cover {
        display: flex;
      }
    }
  }
  .Img-control:hover {
    background: #e2e3e5;
  }
  .bgimg-opacity {
    margin-top: 8px;
    .control-body {
      width: 100%;
      height: 40px;
      background: #f6f7f9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding-left: 14px;
      .iconfont {
        font-size: 20px;
      }
      .slider {
        margin: 0 16px;
        width: 100px;
        ::v-deep .ant-slider-track {
          background-color: #1890fc;
        }
        ::v-deep .ant-slider-rail {
          background-color: #e6e6e6;
        }
      }
      .slider-input {
        width: 30px;
        font-size: 12px;
        background-color: #f6f7f9;
        ::v-deep .ant-input-number-input {
          padding: 0;
          padding-right: 5px;
          text-align: right;
        }
      }
      span {
        font-size: 12px;
        color: #000000;
      }
      .borderNumSpan {
        width: 30px;
        display: inline-block;
        text-align: right;
        padding-right: 5px;
        border: 1px solid #f6f7f9;
      }
      ::v-deep .ant-input-number-handler-wrap {
        display: none;
      }
    }
  }
  .repeat-section {
    width: 100%;
    height: 40px;
    background: #f6f7f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    .icon-box {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      .iconfont {
        width: 32px;
        height: 32px;
        font-size: 22px;
        cursor: pointer;
        // font-weight: bold;
      }
      .iconfont:hover {
        background: rgba(0, 0, 0, 0.08);
        border-radius: 4px;
      }
      .active {
        border-radius: 4px;
        color: #1890fc;
      }
    }
  }
}
.reduce-padding {
  padding: 0;
  border-bottom: 0;
}
</style>
